<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .header {
        height: 200px;
        background-color: #CD69A7;
      }
      .main {
        padding: 30px 0;
        display: flex;
        max-width: 1400px;
        margin: 0 auto;
        gap: 30px;
      }
      .main .sidebar {
        position: sticky;
        top: 0;
        width: 300px;
        align-self: start;
      }
      .main .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 30px;
      }
      .main .content .content-item {
        background-color: #BBD5A6;
        height: 900px;
      }
      .main .sidebar ul li {
        padding: 20px 10px;
        background-color: #90C4E9;
        cursor: pointer;
        border-bottom: 1px solid #E79796;
      }

      .main .sidebar ul li .active {
        color: #fc5531;
      }
      .footer {
        height: 200px;
        background-color: #E79796;
      }
    </style>
  </head>
  <body>
    <section class="header"></section>
    <section class="main">
      <div class="sidebar">
        <ul>
          <li><p class="nav-item active nav1">link1</p></li>
          <li><p class="nav-item nav2">link2</p></li>
          <li><p class="nav-item nav3">link3</p></li>
          <li><p class="nav-item nav4">link4</p></li>
          <li><p class="nav-item nav5">link5</p></li>
          <li><p class="nav-item nav6">link6</p></li>
        </ul>
      </div>
      <div class="content">
        <div id="content-item1" flag="nav1" class="content-item">
          link1-content
        </div>
        <div id="content-item2" flag="nav2" class="content-item">
          link2-content
        </div>
        <div id="content-item3" flag="nav3" class="content-item">
          link3-content
        </div>
        <div id="content-item4" flag="nav4" class="content-item">
          link4-content
        </div>
        <div id="content-item5" flag="nav5" class="content-item">
          link5-content
        </div>
        <div id="content-item6" flag="nav6" class="content-item">
          link6-content
        </div>
      </div>
    </section>
    <section class="footer"></section>
    <script>
      const allNavLi = document.querySelectorAll("p.nav-item");
      const allContents = document.querySelectorAll(".content-item");
      console.log("allNavLi", allNavLi);
      function navLiPop() {
        for (var i = 0; i < allNavLi.length; i++) {
          allNavLi[i].index = i;
          allNavLi[i].onclick = function () {
            for (var j = 0; j < allNavLi.length; j++) {
              window.scrollTo({
                top: allContents[this.index].offsetTop,
                behavior: "smooth",
              });
            }
          };
        }
      }
      navLiPop()
      const handleScroll = () => {
        const rectContent = [];
        allContents.forEach((ele) => {
          const eleRect = ele.getClientRects()[0];
          console.log("eleRect", eleRect);
          if (
            (eleRect.top >= 0 &&
              window.innerHeight - eleRect.top >= eleRect.height) ||
            (eleRect.top < 0 &&
              window.innerHeight <= eleRect.height - Math.abs(eleRect.top)) ||
            eleRect.top >= 0
          ) {
            rectContent.push(ele);
          }
        });
        console.log("rectContent", rectContent);
        let linkId;
        let flag;
        if (rectContent[0]) flag = rectContent[0].getAttribute("flag");
        if (rectContent[0]) linkId = rectContent[0].id;
        if (rectContent[0]) console.log("flag", flag);
        allNavLi.forEach((link) => link.classList.remove("active"));
        const linkDom = document.querySelector(`p.${flag}`);
        console.log("linkDom", linkDom);
        linkDom?.classList.add("active");
      };

      window.addEventListener("scroll", function () {
        throttle(handleScroll, 100)();
      });
      window.addEventListener("mouseup", function () {
        throttle(handleScroll, 100)();
      });

      const throttle = (fn, delay) => {
        let lastExecuted = 0;
        return function () {
          const now = Date.now();
          if (now - lastExecuted > delay) {
            fn();
            lastExecuted = now;
          }
        };
      };
    </script>
  </body>
</html>
